<template>
  <view class="password-container">
    <!-- 原密码 -->

    <uni-section title="原密码" type="line" titleFontSize="22" titleColor="#0c75ff">
      <uni-easyinput type="password" v-model="old_pwd" placeholder="请输入原密码"></uni-easyinput>
    </uni-section>

    <!-- 新密码 -->
    <uni-section title="新密码" type="line" titleFontSize="22" titleColor="#0c75ff">
      <uni-easyinput type="password" v-model="new_pwd" placeholder="请输入新密码"></uni-easyinput>
    </uni-section>

    <!-- 再次输入新密码 -->
    <uni-section title="确认新密码" type="line" titleFontSize="22" titleColor="#0c75ff">
      <uni-easyinput type="password" v-model="new_pwd_again" placeholder="请再次输入新密码"></uni-easyinput>
    </uni-section>

    <!-- 确认修改密码按钮 -->
    <view class="btn">
      <button class="reset" @click="resetPwd">重置</button>
      <button class="Confirm-change" @click="changePwd">确认修改密码</button>
    </view>

    <!-- 错误提示框 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message type="error" :message="tips" :duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 新旧密码
      old_pwd: '',
      new_pwd: '',
      new_pwd_again: '',
      // 提示框文字
      tips: '',
      userId: ''
    };
  },
  mounted () {

    this.userId = this.$store.state.user.token;
  },
  methods: {
    async changePwd () {
      // 判空，三个输入框都不能为空
      if (this.old_pwd.trim() === '') return this.messageToggle('请输入原来的密码');
      if (this.new_pwd.trim() === '') return this.messageToggle('请输入新密码');
      if (this.new_pwd_again.trim() === '') return this.messageToggle('请输入再次输入密码');

      // 判断新密码是否为6-10位的数字或字母
      if (!/^[a-zA-Z0-9]{6,10}$/.test(this.new_pwd)) return this.messageToggle('新密码必须为6-10位的数字或大小写字母！');
      // 判断两次新密码是否一致
      if (this.new_pwd.trim() !== this.new_pwd_again.trim()) return this.messageToggle('两次输入的新密码不一致！');

      // 确认无误后提交数据
      // 先提交接口 提交成功后跳转

      try {
        const res = await uni.$http.post('updatePassword', {
          userId: this.userId,
          password: this.old_pwd,
          newPassword: this.new_pwd,
        })
        console.log(res)

        if (!res)
          return this.messageToggle('返回数据为空')

        if (res.data?.code == 1) {
          return this.messageToggle(this.res.data?.msg)
        }
      } catch (error) {
        console.error("updatePassword", error)
      }

      uni.navigateBack({
        success () {
          uni.$emit('param', { data: 2 });
        }
      });
    },

    resetPwd () {
      this.old_pwd = '';
      this.new_pwd = '';
      this.new_pwd_again = '';
    },
    // 封装提示框
    messageToggle (tips) {
      this.tips = tips;
      this.$refs.message.open();
    }
  }
};
</script>

<style lang="scss">
.password-container {
  background-color: #fff;

  // 修改密码按钮
  .btn {
    margin-top: 40rpx;
    font-size: 32rpx;

    .reset {
      align-items: center;
      // background-color: #e6f5cc;
      background-color: #fff;
      color: #ff5151;
    }

    .Confirm-change {
      margin-top: 20rpx;
      align-items: center;
      background-color: skyblue;
      color: #fff;
    }
  }
}
</style>
